package me.yricky.cov_spectrum.ui.content

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.widthIn
import androidx.compose.material.OutlinedTextField
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment

import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import me.yricky.cov_spectrum.R
import me.yricky.cov_spectrum.app
import me.yricky.cov_spectrum.ui.theme.IconButton

@Composable
fun UserPage(
    modifier: Modifier = Modifier
){
    val appCfg by app.userCfg.asState.collectAsState()
    var accessKey by remember {
        mutableStateOf(appCfg.accessKey)
    }
    LaunchedEffect(appCfg){
        accessKey = appCfg.accessKey
    }

    Column(
        modifier,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        OutlinedTextField(
            value = accessKey,
            onValueChange = { accessKey = it },
            label = { Text(text = "Access Key") },
            trailingIcon = {
                if (accessKey != appCfg.accessKey){
                    IconButton(modifier = Modifier.size(24.dp), painter = painterResource(id = R.drawable.ic_round_save_24)) {
                        app.userCfg.set{
                            copy(accessKey = accessKey)
                        }
                    }
                }
            },
            modifier = Modifier.widthIn(120.dp,640.dp)
        )
    }
}